<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="relext.css" />
		<style>
			.forgetPWD{
				position: relative;
			}
			.ipt1{
				width: 1400px;
				height: 50px;
				line-height: 50px;
				border: 1px solid lightgray;
				border-radius: 3px;
				margin-left: 15px;
				margin-top: 20px;
				padding-left: 100px;
				font-size: 18px;
				color: gainsboro;
			}
			.l-m{
				position: absolute;
				left: 25px;
				top: 32px;
				font-size: 19px;
			}
			.ipt2{
				width: 1400px;
				height: 50px;
				line-height: 50px;
				border: 1px solid lightgray;
				border-radius: 3px;
				margin-left: 15px;
				margin-top: 20px;
				padding-left: 100px;
				font-size: 18px;
				color: gainsboro;
			}
			.l-y{
				position: absolute;
				left: 25px;
				top: 105px;
				font-size: 19px;
			}
			#canvas {
				border: 1px solid lightgray;
				position: absolute;
				left: 1360px;
				top: 102px;
			}
			
			.code .btn {
				width: 80px;
				height: 30px;
				border: 1px solid lightgray;
				background-color: white;
				font-size: 16px;
				font-weight: bold;
				position: absolute;
				left: 1260px;
				top: 103px;
			}
			.ipt3{
				width: 1500px;
				height: 50px;
				margin-left: 15px;
				margin-top: 20px;
				background-color: yellow;
				border: none;
				font-size: 17px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<ul id="forgetPWD">
			<li><label class="l-m">手机号</label><input type="tel" name="mobile" placeholder="输入注册或绑定的手机号" class="ipt1" id="username" /></li>
			<li class="code">
				<label class="l-y">验证码</label>
				<input type="text" name="captcha" placeholder="图文验证码" class="ipt2" id="pwd" />
				<canvas id="canvas" width="150" height="30"></canvas>
				<button class="btn">提交</button>
			</li>
			<li><input type="button" value="下一步" class="ipt3" id="btn-login" onclick="login()" /></li>
		</ul>
	</body>
</html>
<script src="jQuery.js"></script>
<script>
	// 手机号
	var mobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

	function verifyTel(tel) {
		if (mobile.test(tel)) {
			return true;
		}
		return false;
	}
	// 图文验证码
	$(function() {
		var show_num = [];
		draw(show_num);
		$("#canvas").on('click', function() {
			draw(show_num);
		})
		$(".btn").on('click', function() {
			var val = $(".input-val").val().toLowerCase();
			var num = show_num.join("");
			if (val == '') {
				alert('请输入验证码！');
			} else if (val == num) {
				alert('提交成功！');
				$(".input-val").val('');
				// draw(show_num);
			} else {
				alert('验证码错误！请重新输入！');
				$(".input-val").val('');
				// draw(show_num);
			}
		})
	})
	//生成并渲染出验证码图形
	function draw(show_num) {
		var canvas_width = $('#canvas').width();
		var canvas_height = $('#canvas').height();
		var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
		var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
		canvas.width = canvas_width;
		canvas.height = canvas_height;
		var sCode =
			"a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
		var aCode = sCode.split(",");
		var aLength = aCode.length; //获取到数组的长度
		for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
			// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			var deg = Math.random() - 0.5; //产生一个随机弧度
			var txt = aCode[j]; //得到随机的一个内容
			show_num[i] = txt.toLowerCase();
			var x = 10 + i * 20; //文字在canvas上的x坐标
			var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
			context.font = "bold 23px 微软雅黑";
			context.translate(x, y);
			context.rotate(deg);
			context.fillStyle = randomColor();
			context.fillText(txt, 0, 0);
			context.rotate(-deg);
			context.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			context.strokeStyle = randomColor();
			context.beginPath();
			context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			context.strokeStyle = randomColor();
			context.beginPath();
			var x = Math.random() * canvas_width;
			var y = Math.random() * canvas_height;
			context.moveTo(x, y);
			context.lineTo(x + 1, y + 1);
			context.stroke();
		}
	}
	//得到随机的颜色值
	function randomColor() {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return "rgb(" + r + "," + g + "," + b + ")";
	}
</script>
